<template>
	<up-overlay :show="show" @click="show = false">
		<view class="poster">
			<image @click.stop="" class="pic" src="http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280"></image>
			<view class="desc" @click.stop="">
				<view class="left">
					<view class="title">
						<text>小逸精灵</text>
					</view>
					<view class="tips">
						<text>守护你的眼睛健康</text>
					</view>
				</view>
				<view class="code"></view>
			</view>
			<view class="footer">
				<view class="options">
					<view class="item">
						<view class="icon">
							
						</view>
						<view class="tips">
							<text>保存本地</text>
						</view>
					</view>
					<view class="item">
						<view class="icon">
							
						</view>
						<view class="tips">
							<text>好友</text>
						</view>
					</view>
					<view class="item">
						<view class="icon">
							
						</view>
						<view class="tips">
							<text>朋友圈</text>
						</view>
					</view>
				</view>
				<view class="close">
					<up-icon name="close" color="#fff" size="73rpx" bold @click="show=false"></up-icon>
				</view>
			</view>
		</view>
	</up-overlay>
</template>

<script setup>
import {ref} from "vue";
let show=ref(false);
function showPoster(){
	show.value=true;
}
defineExpose({
	showPoster,
});
</script>

<style lang="less" scoped>
.poster{
	width: 648rpx;
	margin: 140rpx auto;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	.pic{
		width: 100%;
		height: 718rpx;
		border-radius: 28rpx 28rpx 0 0;
	}
	.desc{
		width: 100%;
		padding: 21rpx 35rpx 19rpx 26rpx;
		box-sizing: border-box;
		border-radius: 0 0 28rpx 28rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.left{
			text-align: center;
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 42rpx;
				color: #439F5B;
				letter-spacing: 4rpx;
			}
			.tips{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 21rpx;
				color: #439F5B;
				letter-spacing: 2rpx;
			}
		}
		.code{
			min-width: 121rpx;
			max-width: 121rpx;
			width: 121rpx;
			height: 121rpx;
			background-color: #d8d8d8;
		}
	}
	.footer{
		position: absolute;
		width: 100%;
		left: 0;
		top: 100%;
		.options{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 26rpx 86rpx;
			.item{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				row-gap: 5rpx;
				.icon{
					width: 95rpx;
					height: 95rpx;
					background-color: #fff;
					border-radius: 50%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
				.tips{
					font-family: PingFangSC, PingFang SC;
					font-size: 21rpx;
					color: #FFFFFF;
					letter-spacing: 1rpx;
				}
			}
		}
		.close{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-top: 60rpx;
		}
	}
}
</style>